<template>
    <div class="theme">
        <div class="theme-list">
            <div class="theme-list-item" :class="themeNum==0?'theme-list-item-active':''" @click="setTheme(0)">
                <div class="theme-list-item-img">
                    <img src="./assets/theme-classic.png" />
                </div>
                <div class="theme-list-item-title">经典主题</div>
                <div class="theme-list-item-select" v-show="themeNum==0">
                    <i class="el-icon-circle-check"></i>
                </div>
            </div>
            <div class="theme-list-item" :class="themeNum==1?'theme-list-item-active':''" @click="setTheme(1)">
                <div class="theme-list-item-img">
                    <img src="./assets/theme-win.png" />
                </div>
                <div class="theme-list-item-title">现代主题 ( 未开发完成 )</div>
                <div class="theme-list-item-select" v-show="themeNum==1">
                    <i class="el-icon-circle-check"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, toRefs } from "vue";
import { useStore } from "vuex";
import common from "@/lib/common";
export default defineComponent({
    name: "Theme",
    setup() {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const themeNum: number = common.homeTheme();
        // 设置主题
        const setTheme = (val: number) => {
            common.setHomeTheme(val);
            window.location.reload();
        };
        return {
            UIAuth,
            bodySize,
            themeNum,
            setTheme
        };
    },
});
</script>

<style scoped lang="scss">
.theme {
    padding: 5px;
    &-list {
        display: flex;
        &-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 8px;
            width: 160px;
            background-color: $text-gray3-color;
            box-shadow: 0 0 5px $text-gray0-color;
            &:hover {
                cursor: pointer;
                box-shadow: 0 0 15px $primary-color;
            }
            &-img {
                width: 100%;
                height: 160px;
                & > img {
                    width: 100%;
                    height: 100%;
                }
            }
            &-title {
                text-align: center;
                padding: 5px;
            }
            &-active {
                box-shadow: 0 0 10px $primary-color;
            }
            &-select {
                position: absolute;
                color: $primary-color;
                font-size: 50px;
                text-shadow: 0 0 10px #ffffff, 0 0 10px #ffffff,
                    0 0 10px #ffffff;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>